@charset "utf-8";

$fontsize:64px;
html{
    font-size: 64px;
}
@function r($px){
    @return $px/$fontsize*1rem;
}


.web_login{
    position: absolute;
    top: r(90px);
    bottom: r(95px);
    transform: translateX(-100%);
    width: 100%;
    transition: all .2s linear;
    background: #222;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling:touch;
    z-index: 200;
    .nav{
        width: r(611px);
        height: r(85px);
        margin: 0 auto;
        border-bottom: r(1px) solid #484848;
        padding-bottom: r(16px);
        position: relative;
        margin-bottom: r(65px);
    }
    .close_wrap{
        width: r(50px);
        height: r(50px);
        position: absolute;
        top: r(16px);
        left: 0;
        img{
            width: 100%;
        }
    }
    .logo_wrap{
        width: r(165px);
        height: r(140px);
        margin: 0 auto;
        img{
            width: 100%;
            height: 100%;
        }
    }
    form{
        width: r(492px);
        margin: r(45px) auto 0 auto;
        .username_wrap{
            font-size: 0;
            height: r(53px);
            .icon_wrap{
                position: relative;
                display: inline-block;
                vertical-align: middle;
                width: r(61px);
                height: r(53px);
                background: #303030; 
                &::before{
                    content: "\e697";
                    position: absolute;
                    left: 25%;
                    top: 20%;
                    color: #fff;
                }
            }
            .wrap_of_user{
                font-size: 0;
                display: inline-block;
                vertical-align: middle;
                height: r(53px);
                line-height: r(53px);
                padding-top: r(10px);
                padding-left: r(38px);
                background: #3d3d3d;
                width: r(431px);
                input[id="username"]{
                    border: none;
                    background: none;
                    width: 90%;
                }
            }
        }
        .pwd_wrap{
            font-size: 0;
            height: r(53px);
            margin-top: r(16px);
            margin-bottom: r(22px);
            .icon_wrap{
                position: relative;
                display: inline-block;
                vertical-align: middle;
                width: r(61px);
                height: r(53px);
                border: none;
                background: #303030; 
                &::before{
                    content: "\e659";
                    position: absolute;
                    left: 25%;
                    top: 20%;
                    color: #fff;
                }
            }
            .wrap_of_pwd{
                font-size: 0;
                display: inline-block;
                vertical-align: middle;
                height: r(53px);
                line-height: r(53px);
                padding-top: r(10px);
                padding-left: r(38px);
                background: #3d3d3d;
                width: r(431px);
                input[id="pwd"]{
                    border: none;
                    background: none;
                    width: 90%;
                }
            }
        }
        p{
            &::before{
                font-size: 14px;
                content: "\e665";
                color: #fff;
                position: absolute;
                left: -30%;
                top: 5%;
            }
            position: relative;
            font-size: 12px;
            color: #fff;
            &::after{
                clear: both;
                content: "";
                display: block;
            }
        }
        .btn_login{
            color: #fff;
            font-size: 12px;
            margin-top: r(130px);
            text-align: center;
            width: r(490px);
            height: r(50px);
            line-height: r(50px);
            background: #b60005;
            border: r(1px) solid #b60005;
        }
        .bg{
            text-align: center;
            color: #fff;
            width: r(490px);
            height: r(50px);
            border: r(1px) solid #b60005;
            background: #303030;
        }
    }
}
.login_dis_open{
    transform: translateX(0);
}
